<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->
<ng-template #alertcontainer let-modal>
    <div class="modal-header alert alert-danger">
        <h5 class="modal-title alert" id="modal-basic-title">{{'error.modal.title'|translate}}</h5>
        <button type="button" class="close alert" aria-label="{{'modal.close'|translate}}" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="alert alert-danger">
        <p>{{'error.modal.info'|translate}}</p>
        </div>
        <div *ngFor="let message of errorMessages" class="alert alert-secondary">
            <p>{{message.message}}</p>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger" (click)="modal.close('Save click')">{{'modal.close'|translate}}</button>
    </div>
</ng-template>
<app-toasts aria-live="polite" aria-atomic="true"></app-toasts>
<div class="app d-flex flex-column">
    <header>
        <nav class="navbar navbar-expand-md fixed-top navbar-light " style="background-color: #c6cbd2;">
            <a class="navbar-brand" routerLink="/">
                <img src="../assets/params/images/archiva_logo_40h.png" alt="ARCHIVA">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault"
                    aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarsDefault">
                <div class="navbar-nav ml-auto">
                    <span *ngIf="auth.authenticated" class="navbar-text border-right pr-2 mr-2">
                      <a class="nav-link" routerLink="/me/info" >
                                {{user.userInfo.full_name}}
                            </a>
                    </span>
                    <ul class="navbar-nav d-lg-flex align-items-center">
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="/">
                                <i class="fas fa-home mr-1"></i>{{ 'menu.home' |translate }}
                            </a>
                        </li>
                        <li *ngIf="!auth.authenticated" class="nav-item active">
                            <a class="nav-link" routerLink="/login" data-toggle="modal" data-target="#loginModal">
                                <i class="fas fa-user mr-1"></i>{{'menu.login' | translate}}
                            </a>
                        </li>
                        <li *ngIf="auth.authenticated" class="nav-item active">
                            <a class="nav-link" routerLink="/logout" (click)="auth.logout()">
                                <i class="fas fa-user mr-1"></i>{{'menu.logout' | translate}}
                            </a>
                        </li>
                        <li class="nav-item active dropdown">
                            <a class="nav-link dropdown-toggle" id="dropdown09" data-toggle="dropdown"
                               aria-haspopup="true" aria-expanded="false"><span class="flag-icon {{langIcon()}}"></span></a>
                            <div class="dropdown-menu" aria-labelledby="dropdown09">
                                <a class="dropdown-item" href="#en" (click)="switchLang('en')"><span
                                        class="flag-icon flag-icon-gb"> </span> English</a>
                                <a class="dropdown-item" href="#de" (click)="switchLang('de')"><span
                                        class="flag-icon flag-icon-de"> </span> German</a>
                            </div>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="/about">
                                <i class="far fa-question-circle mr-1"></i>{{'menu.about' | translate}}
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" routerLink="/contact">
                                <i class="fas fa-envelope mr-1"></i>{{ 'menu.contact' | translate }}
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="https://github.com/apache/archiva">
                                <i class="fab fa-github mr-1"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <main class="container-fluid flex-fill">
        <div>
            <router-outlet></router-outlet>
        </div>
    </main>

    <hr/>
    <footer class="container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-center text-black-50">&copy; 2020 - archiva.apache.org</p>
                </div>
            </div>
        </div>
    </footer>

</div>